{include file='common/head'}
<script>
    document.title = "我的 | {:config('system.base.title')} "
</script>
<style>
    .mine-header {
        height: 130px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /* background: url(__IMG__/other/profile_bg.jpg); */
        background:linear-gradient(#1e9fff , #1e9fff ,#31bdec );
        box-sizing: content-box;
        border-radius: 5px;
        padding-left: 5%;
    }
    .mine-header p{
        margin-left: 10px;
    }
    .mine-header span{
        color: #fff;
    }
    .avator {
        width: 60px;
        height:60px;
        border-radius: 50%;
        margin: 10px 0;
        box-shadow: 0 3px 8px #1e9fff;
        border: 2px solid #eee;
    }
    .mine-data{
        background-color: #fff;
        border-radius: 5px;
        padding: 10px;
        margin: -10px 10px 5px 10px;
    }
    .mine-data a{
        display: block;
        text-align: center;
    }
    .mine-menus {
        background-color: #fff;
        border-radius: 5px;
        margin:20px 10px 5px 10px;
    }
    .mine-menus li{
        line-height: 40px;
        padding-left: 20px;
        border-bottom: 1px solid #eee;
    }
    .mine-menus li > a{
        display: block;
    }
    .mine-menus li:last-child{
        border-bottom: none;
    }
</style>
<div class="layout">
    <div class="mine-header">
        <img src="{$userData.profile.head_icon}" class="avator" alt="">
        <p>
            <span class=" layui-font-16" style="color: #fff;"><b>{$userData.profile.nickname}</b></span>
            <br>
            <span class="layui-font-12" style="color: #fff;">{$userData.profile.signature}</span>
            <br>
            {if $userData.role}
            <span class="layui-badge layui-bg-red">{$userData.role}</span>
            {/if}
            <span class="layui-badge layui-bg-{$userData.is_vip == 1 ? 'orange' : 'blue'}">{$userData.is_vip == 1 ? 'VIP' : '普通会员'}</span>

        </p>
    </div>
    <div class="mine-data layui-row">
        <div class="layui-col-xs3">
            <a href="{:url('/index/account/article')}">
                <span class="layui-font-blue layui-font-16">{$userData.articleCount}</span>
                <br><span class="layui-font-12">帖子</span>
            </a>
        </div>
        <div class="layui-col-xs3">
            <a href="{:url('/index/account/comment')}">
                <span class="layui-font-blue layui-font-16">{$userData.commentCount}</span>
                <br><span class="layui-font-12">评论</span>
            </a>
        </div>
        <div class="layui-col-xs3">
            <a href="{:url('/index/account/collect')}">
                <span class="layui-font-blue layui-font-16">{$userData.collectCount}</span>
                <br><span class="layui-font-12">收藏</span>
            </a>
        </div>
        <div class="layui-col-xs3">
            <a href="{:url('/index/account/follow')}">
                <span class="layui-font-blue layui-font-16">{$userData.followCount}</span>
                <br><span class="layui-font-12">关注</span>
            </a>
        </div>
    </div>
    <ul class="mine-menus">
        <li><a href="{:url('/index/account/index')}">个人信息</a></li>
        <li><a href="{:url('/index/shop/index')}">积分商城</a></li>
        <li><a href="{:url('/index/shop/score')}">卡密兑换</a></li>
        <li><a href="{:url('/index/msg/index')}">我的消息 {$base.msgCount > 0 ?  '<span class="layui-badge-dot"></span>' : ''}</a></li>
        {if $Request.session.user != ''}
        <li><a href="/index/login/logout">退出登录</a></li>
        {/if}
    </ul>
</div>
{include file='common/bottom'}
<script>
    $('#log').click(() => {
        window.location.href = "{$base.isLog}" ? "#" : "{:url('/index/login')}"
    })
    // $('#sign').click(function () {
    //     $.get('/index/index/sign', (res) => {
    //         if (res.code == 200) {
    //             layer.msg('签到成功')
    //             $(this).removeClass('layui-btn-blue')
    //             $(this).addClass('layui-btn-primary')
    //             $(this)[0].innerHTML = '今日已签到'
    //         } else {
    //             layer.msg('签到失败：' + res.message)
    //         }
    //     }, 'json')
    // })
</script>